<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高光谱图像分类系统</title>

    <link rel="stylesheet" href="assets/css/styles.css">
    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/images/logo/favicon.png">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- file upload -->
    <link rel="stylesheet" href="assets/css/file-upload.css">
    <!-- file upload -->
    <link rel="stylesheet" href="assets/css/plyr.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css">
    <!-- full calendar -->
    <link rel="stylesheet" href="assets/css/full-calendar.css">
    <!-- jquery Ui -->
    <link rel="stylesheet" href="assets/css/jquery-ui.css">
    <!-- editor quill Ui -->
    <link rel="stylesheet" href="assets/css/editor-quill.css">
    <!-- apex charts Css -->
    <link rel="stylesheet" href="assets/css/apexcharts.css">
    <!-- calendar Css -->
    <link rel="stylesheet" href="assets/css/calendar.css">
    <!-- jvector map Css -->
    <link rel="stylesheet" href="assets/css/jquery-jvectormap-2.0.5.css">
    <!-- Main css -->
    <link rel="stylesheet" href="assets/css/main.css">
</head>

<body>
    <video id="videoBG" poster="./assets/images/poster.jpg" autoplay muted loop>
        <source src="./backvideo.mp4" type="video/mp4">
    </video>

    <!-- 导航栏 -->
    <header>
        <div class="logo">
            <img src="./assets/images/matlab.png">
            <span>高光谱图像分类系统</span>
        </div>
        <div class="nav-links">
            <a href="https://gitee.com/cojinun/2024-software-engineering-project" target="_blank" class="circle-button">
                <i class="ph ph-phone"></i>&nbsp;联系我们
            </a>
            <a href="#" class="circle-button">
                <i class="ph ph-info"></i>&nbsp;系统说明
            </a>

            <div class="dropdown">
                <button
                    class="users arrow-down-icon border border-gray-200 rounded-pill p-4 d-inline-block pe-40 position-relative"
                    type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <span class="position-relative">
                        <img src="assets/images/thumbs/user-img.png" alt="Image" class="h-32 w-32 rounded-circle">
                        <span
                            class="activation-badge w-8 h-8 position-absolute inset-block-end-0 inset-inline-end-0"></span>
                    </span>
                </button>
                <div class="dropdown-menu dropdown-menu--lg border-0 bg-transparent p-0">
                    <div class="card border border-gray-100 rounded-12 box-shadow-custom">
                        <div class="card-body">
                            <div class="flex-align gap-8 mb-20 pb-20 border-bottom border-gray-100">
                                <img src="assets/images/thumbs/user-img.png" alt="" class="w-54 h-54 rounded-circle">
                                <div class="">
                                    <h4 class="mb-0">Michel John</h4>
                                    <p class="fw-medium text-13 text-gray-200">examplemail@mail.com</p>
                                </div>
                            </div>
                            <ul class="max-h-270 overflow-y-auto scroll-sm pe-4">
                                <li class="mb-4">
                                    <a href="#" id="openSetPanelBtn"
                                        class="py-12 text-15 px-20 hover-bg-gray-50 text-gray-300 rounded-8 flex-align gap-8 fw-medium text-15">
                                        <span class="text-2xl text-primary-600 d-flex"><i class="ph ph-gear"></i></span>
                                        <span class="text">账户设置</span>
                                    </a>
                                </li>
                                <li class="mb-4">
                                    <a href="#" id="openCommentPanelBtn"
                                        class="py-12 text-15 px-20 hover-bg-gray-50 text-gray-300 rounded-8 flex-align gap-8 fw-medium text-15">
                                        <span class="text-2xl text-primary-600 d-flex"><i
                                                class="ph ph-chats-teardrop"></i></span>
                                        <span class="text">用户评论</span>
                                    </a>
                                </li>
                                <li class="mb-4">
                                    <a href="analytics.html"
                                        class="py-12 text-15 px-20 hover-bg-gray-50 text-gray-300 rounded-8 flex-align gap-8 fw-medium text-15">
                                        <span class="text-2xl text-primary-600 d-flex"><i
                                                class="ph ph-chart-line-up"></i></span>
                                        <span class="text">日常活动</span>
                                    </a>
                                </li>
                                <li class="pt-8 border-top border-gray-100">
                                    <a href="sign-in.html"
                                        class="py-12 text-15 px-20 hover-bg-danger-50 text-gray-300 hover-text-danger-600 rounded-8 flex-align gap-8 fw-medium text-15">
                                        <span class="text-2xl text-danger-600 d-flex"><i
                                                class="ph ph-sign-out"></i></span>
                                        <span class="text">注销</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- 用户设置右侧面板 -->
    <div id="setRightPanel">
        <div class="dashboard-body">
            <!-- Breadcrumb Start -->
            <div class="breadcrumb mb-24">
                <ul class="flex-align gap-4">
                    <li><a href="index.html" class="text-gray-200 fw-normal text-15 hover-text-main-600">主页</a></li>
                    <li> <span class="text-gray-500 fw-normal d-flex"><i class="ph ph-caret-right"></i></span> </li>
                    <li><span class="text-main-600 fw-normal text-15">账户设置</span></li>
                </ul>
            </div>
            <!-- Breadcrumb End -->

            <div class="card overflow-hidden">
                <div class="card-body p-0">
                    <div class="cover-img position-relative">
                        <label for="coverImageUpload"
                            class="btn border-gray-200 text-gray-200 fw-normal hover-bg-gray-400 rounded-pill py-4 px-14 position-absolute inset-block-start-0 inset-inline-end-0 mt-24 me-24">修改封面</label>
                        <div class="avatar-upload">
                            <input type='file' id="coverImageUpload" accept=".png, .jpg, .jpeg">
                            <div class="avatar-preview">
                                <div id="coverImagePreview" style="background-image: url('assets/images/poster.jpg');">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="setting-profile px-24">
                        <div class="flex-between">
                            <div class="d-flex align-items-end flex-wrap mb-32 gap-24">
                                <img src="assets/images/poster.jpg" alt=""
                                    class="w-120 h-120 rounded-circle border border-white">
                                <div>
                                    <h4 class="mb-8">Mohid Khan</h4>
                                    <div class="setting-profile__infos flex-align flex-wrap gap-16">
                                        <div class="flex-align gap-6">
                                            <span class="text-gray-600 d-flex text-lg"><i
                                                    class="ph ph-calendar-dots"></i></span>
                                            <span class="text-gray-600 d-flex text-15">2024年8月 加入</span>
                                        </div>
                                        <div class="flex-align gap-6">
                                            <span class="text-gray-600 d-flex text-lg"><i
                                                    class="ph ph-swatches"></i></span>
                                            <span class="text-gray-600 d-flex text-15">我是中国的一名产品设计师。我专注于UX/UI设计、品牌战略和Web开发。</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <ul class="nav common-tab style-two nav-pills mb-0" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="pills-details-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-details" type="button" role="tab"
                                    aria-controls="pills-details" aria-selected="true">个人中心</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-password-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-password" type="button" role="tab"
                                    aria-controls="pills-password" aria-selected="false">修改密码</button>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>

            <div class="tab-content" id="pills-tabContent">
                <!-- My Details Tab start -->
                <div class="tab-pane fade show active" id="pills-details" role="tabpanel"
                    aria-labelledby="pills-details-tab" tabindex="0">
                    <div class="card mt-24">
                        <div class="card-header border-bottom">
                            <h4 class="mb-4">个人中心</h4>
                            <p class="text-gray-600 text-15">请完善你的个人设置</p>
                        </div>
                        <div class="card-body">
                            <form action="#">
                                <div class="row gy-4">
                                    <div class="col-sm-6 col-xs-6">
                                        <label for="fname" class="form-label mb-8 h6">性氏</label>
                                        <input type="text" class="form-control py-11" id="fname"
                                            placeholder="输入你想修改的姓氏">
                                    </div>
                                    <div class="col-sm-6 col-xs-6">
                                        <label for="lname" class="form-label mb-8 h6">名字</label>
                                        <input type="text" class="form-control py-11" id="lname"
                                            placeholder="输入你想修改的名字">
                                    </div>
                                    <div class="col-sm-6 col-xs-6">
                                        <label for="email" class="form-label mb-8 h6">邮箱</label>
                                        <input type="email" class="form-control py-11" id="email"
                                            placeholder="输入你想修改的邮箱">
                                        <!-- 修改后要验证，待实现 -->
                                    </div>
                                    <div class="col-sm-6 col-xs-6">
                                        <label for="phone" class="form-label mb-8 h6">手机号</label>
                                        <input type="number" class="form-control py-11" id="phone"
                                            placeholder="输入你想修改的电话号码">
                                    </div>
                                    <div class="col-12">
                                        <label for="imageUpload" class="form-label mb-8 h6">头像</label>
                                        <div class="flex-align gap-22">
                                            <div class="avatar-upload flex-shrink-0">
                                                <input type='file' id="imageUpload" accept=".png, .jpg, .jpeg">
                                                <div class="avatar-preview">
                                                    <div id="profileImagePreview"
                                                        style="background-image: url('assets/images/thumbs/setting-profile-img.jpg');">
                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                class="avatar-upload-box text-center position-relative flex-grow-1 py-24 px-4 rounded-16 border border-main-300 border-dashed bg-main-50 hover-bg-main-100 hover-border-main-400 transition-2 cursor-pointer">
                                                <label for="imageUpload"
                                                    class="position-absolute inset-block-start-0 inset-inline-start-0 w-100 h-100 rounded-16 cursor-pointer z-1"></label>
                                                <span class="text-32 icon text-main-600 d-inline-flex"><i
                                                        class="ph ph-upload"></i></span>
                                                <span
                                                    class="text-13 d-block text-gray-400 text my-8">点击这里上传图片</span>
                                                <span class="text-13 d-block text-main-600">SVG, PNG, JPEG 或 GIF (最大
                                                    1080px1200px)</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="editor">
                                            <label class="form-label mb-8 h6">个人简介</label>
<!--                                            <div id="editor">-->
<!--                                                <p>我是中国的一名产品设计师。我专注于UX/UI设计、品牌战略和Web开发。</p>-->
<!--                                            </div>-->
                                            <input type="text" class="form-control py-11" id="editor"
                                            placeholder="这一刻的想法...">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="flex-align justify-content-end gap-8">
                                            <button type="reset"
                                                class="btn btn-outline-main bg-main-100 border-main-100 text-main-600 rounded-pill py-9">取消</button>
                                            <button type="submit" class="btn btn-main rounded-pill py-9">保存更改</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- My Details Tab End -->

                <!-- Password Tab Start -->
                <div class="tab-pane fade" id="pills-password" role="tabpanel" aria-labelledby="pills-password-tab"
                    tabindex="0">
                    <div class="card mt-24">
                        <div class="card-header border-bottom">
                            <h4 class="mb-4">修改密码</h4>
                            <p class="text-gray-600 text-15">请设置你的新密码</p>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <form action="#">
                                        <div class="row gy-4">
                                            <div class="col-12">
                                                <label for="current-password" class="form-label mb-8 h6">当前密码</label>
                                                <div class="position-relative">
                                                    <input type="password" class="form-control py-11"
                                                        id="current-password" placeholder="输入你的当前密码">
                                                    <span
                                                        class="toggle-password position-absolute top-50 inset-inline-end-0 me-16 translate-middle-y ph ph-eye-slash"
                                                        id="#current-password"></span>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <label for="new-password" class="form-label mb-8 h6">新密码</label>
                                                <div class="position-relative">
                                                    <input type="password" class="form-control py-11" id="new-password"
                                                        placeholder="输入你的新密码">
                                                    <span
                                                        class="toggle-password position-absolute top-50 inset-inline-end-0 me-16 translate-middle-y ph ph-eye-slash"
                                                        id="#new-password"></span>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <label for="confirm-password" class="form-label mb-8 h6">确认密码</label>
                                                <div class="position-relative">
                                                    <input type="password" class="form-control py-11"
                                                        id="confirm-password" placeholder="再次输入你的新密码">
                                                    <span
                                                        class="toggle-password position-absolute top-50 inset-inline-end-0 me-16 translate-middle-y ph ph-eye-slash"
                                                        id="#confirm-password"></span>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <label class="form-label mb-8 h6">密码要求：</label>
                                                <ul class="list-inside">
                                                    <li class="text-gray-600 mb-4">至少包含8位密码，更长会更好</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="col-12">
                                    <div class="flex-align justify-content-end gap-8">
                                        <button type="reset"
                                            class="btn btn-outline-main bg-main-100 border-main-100 text-main-600 rounded-pill py-9">取消</button>
                                        <button type="submit" class="btn btn-main rounded-pill py-9">保存更改</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Password Tab End -->

            </div>
        </div>
    </div>

    <!-- 用户评价右侧面板 -->
    <div id="commentRightPanel">
        <div class="dashboard-body">
            <!-- Breadcrumb Start -->
            <div class="breadcrumb mb-24">
                <ul class="flex-align gap-4">
                    <li><a href="index.html" class="text-gray-200 fw-normal text-15 hover-text-main-600">主页</a></li>
                    <li> <span class="text-gray-500 fw-normal d-flex"><i class="ph ph-caret-right"></i></span> </li>
                    <li><span class="text-main-600 fw-normal text-15">用户评论</span></li>
                </ul>
            </div>
            <!-- Breadcrumb End -->
            <div class="reviews-container">
                <!-- 页面评论按钮 -->
                <button class="comment-button-page" data-bs-toggle="modal" data-bs-target="#commentModal">
                    <i class="ph ph-comment"></i>+ 评论
                </button>

                <!-- 卡片容器 -->
                <div class="comment-card-container">
                    <div class="comment-card">
                        <!-- 用户信息 -->
                        <div class="comment-card-header">
                            <img src="assets/images/thumbs/user-img.png" alt="User" class="user-avatar">
                            <div class="user-info">
                                <h5 class="user-name">John Doe</h5>
                                <p class="user-date">2024年12月5日</p>
                            </div>
                        </div>

                        <!-- 用户评价 -->
                        <div class="comment-card-body">
                            <p class="user-comment">这个系统真的非常好，使用起来非常便捷，界面也很友好，推荐给大家！</p>
                        </div>

                        <!-- 点赞 -->
                        <div class="comment-card-footer">
                            <button class="like-button">
                                <i class="ph ph-heart"></i> 赞
                            </button>
                        </div>

                    </div>
                    <div class="comment-card">
                        <!-- 用户信息 -->
                        <div class="comment-card-header">
                            <img src="assets/images/thumbs/user-img.png" alt="User" class="user-avatar">
                            <div class="user-info">
                                <h5 class="user-name">John Doe</h5>
                                <p class="user-date">2024年12月5日</p>
                            </div>
                        </div>

                        <!-- 用户评价 -->
                        <div class="comment-card-body">
                            <p class="user-comment">这个系统真的非常好，使用起来非常便捷，界面也很友好，推荐给大家！</p>
                        </div>

                        <!-- 点赞 -->
                        <div class="comment-card-footer">
                            <button class="like-button">
                                <i class="ph ph-heart"></i> 赞
                            </button>
                        </div>

                    </div>
                    <div class="comment-card">
                        <!-- 用户信息 -->
                        <div class="comment-card-header">
                            <img src="assets/images/thumbs/user-img.png" alt="User" class="user-avatar">
                            <div class="user-info">
                                <h5 class="user-name">John Doe</h5>
                                <p class="user-date">2024年12月5日</p>
                            </div>
                        </div>

                        <!-- 用户评价 -->
                        <div class="comment-card-body">
                            <p class="user-comment">这个系统真的非常好，使用起来非常便捷，界面也很友好，推荐给大家！</p>
                        </div>

                        <!-- 点赞 -->
                        <div class="comment-card-footer">
                            <button class="like-button">
                                <i class="ph ph-heart"></i> 赞
                            </button>
                        </div>

                    </div>
                    <div class="comment-card">
                        <!-- 用户信息 -->
                        <div class="comment-card-header">
                            <img src="assets/images/thumbs/user-img.png" alt="User" class="user-avatar">
                            <div class="user-info">
                                <h5 class="user-name">John Doe</h5>
                                <p class="user-date">2024年12月5日</p>
                            </div>
                        </div>

                        <!-- 用户评价 -->
                        <div class="comment-card-body">
                            <p class="user-comment">这个系统真的非常好，使用起来非常便捷，界面也很友好，推荐给大家！</p>
                        </div>

                        <!-- 点赞 -->
                        <div class="comment-card-footer">
                            <button class="like-button">
                                <i class="ph ph-heart"></i> 赞
                            </button>
                        </div>

                    </div>
                </div>
            </div>


        </div>
    </div>
    <!-- 发布评论的模态框 -->
    <div class="modal fade" id="commentModal" tabindex="-1" aria-labelledby="commentModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="commentModalLabel">发布评论</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <textarea class="form-control" id="userCommentInput" rows="4" placeholder="写下你的评论..."></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="submitCommentButton">发布评论</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 遮罩层 -->
    <div id="backdrop"></div>

    <!-- 主体内容区域 -->
    <div class="container">
        <!-- 左侧按钮 -->
        <div class="left-side">
            <div class="button-row">
                <!-- 上传Correct按钮 -->
                <button onclick="document.getElementById('image1').click();">上传Correct</button>
                <!-- 上传GT按钮 -->
                <button onclick="document.getElementById('image2').click();">上传GT</button>

                <!-- 隐藏的文件输入框 -->
                <input type="file" id="image1" name="image1" style="display:none;" accept=".mat"
                    onchange="handleFileUpload(event, 'correct')">
                <input type="file" id="image2" name="image2" style="display:none;" accept=".mat"
                    onchange="handleFileUpload(event, 'gt')">
            </div>
            <div class="button-row full-width">
                <button id="predict-button">点击预测</button>
            </div>
            <div class="button-row" id="download-section">
                <button id="download-image-button">下载图像</button>
                <button id="download-data-button">下载数据</button>
            </div>
        </div>

        <!-- 右侧图像展示 -->
        <div class="right-side">
            <div class="image-container">
                <div class="image-item">
                    <div class="image-title">
                        原始图像
                    </div>
                    <img src="./assets/images/image.png" alt="原始图像">
                </div>
                <div class="image-item">
                    <div class="image-title">
                        分类图像
                    </div>
                    <!-- <img src="./assets/images/image.png" alt="分类图像"> -->
                    <canvas id="ProgressImageCanvas" width="350" height="350"></canvas>
                </div>
            </div>
        </div>
        <div id="showTypeCard"></div>
    </div>
    <script src="./assets/js/script.js"></script>
    <!-- Jquery js -->
    <script src="assets/js/jquery-3.7.1.min.js"></script>
    <!-- Bootstrap Bundle Js -->
    <script src="assets/js/boostrap.bundle.min.js"></script>
    <!-- Phosphor Js -->
    <script src="assets/js/phosphor-icon.js"></script>
    <!-- file upload -->
    <script src="assets/js/file-upload.js"></script>
    <!-- file upload -->
    <script src="assets/js/plyr.js"></script>
    <!-- dataTables -->
    <script src="https://cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>
    <!-- full calendar -->
    <script src="assets/js/full-calendar.js"></script>
    <!-- jQuery UI -->
    <script src="assets/js/jquery-ui.js"></script>
    <!-- jQuery UI -->
    <script src="assets/js/editor-quill.js"></script>
    <!-- apex charts -->
    <script src="assets/js/apexcharts.min.js"></script>
    <!-- Calendar Js -->
    <script src="assets/js/calendar.js"></script>
    <!-- jvectormap Js -->
    <script src="assets/js/jquery-jvectormap-2.0.5.min.js"></script>
    <!-- jvectormap world Js -->
    <script src="assets/js/jquery-jvectormap-world-mill-en.js"></script>
    <!-- main js -->
    <script src="assets/js/main.js"></script>
</body>

</html>